<template>
  <transition name="evaluation">
    <div class="wrapper">
      <common-header :title="title"
                     class="header"></common-header>
      <div class="content">
        <h3>商家评分</h3>
        <div class="service score">
          <div class="desc">服务评分</div>
          <van-rate v-model="serviceValue" />
        </div>
        <div class=" Environment score">
          <div class="desc">环境评分</div>
          <van-rate v-model="environmentValue" />
        </div>
        <div class="all score">
          <div class="desc">综合评分</div>
          <van-rate v-model="allValue" />
        </div>
        <h3>我要晒图{{localIds.length}}</h3>
        <div class="img-container">
          <ul class="img-list">
            <li class="img-item"
                v-if="localIds.length > 0"
                v-for="(item, index) of localIds"
                :key="index">
              <img :src="item"
                   alt=""
                   @click="handleClickIndex(index)">

            </li>
          </ul>
          <div class="uplode-button"
               @click="handleClick"
               v-show="!(localIds.length >= 4 && localIds.length)">
            <div class="before"></div>
          </div>
        </div>
        <h3>评价内容</h3>

        <textarea name=""
                  class="textarea"
                  placeholder="请输入评价内容,最多200字"
                  ref="textarea"
                  maxlength="140"></textarea>
        <button class="submit"
                @click.prevent="handleSubmit">提交评价</button>
      </div>
    </div>
  </transition>

</template>

<script>
import CommonHeader from 'common/header/Header'
import {
  Toast
} from 'vant'
import wx from 'weixin-js-sdk'
export default {
  name: 'ReserveEvaluation',
  components: {
    CommonHeader
  },
  data () {
    return {
      title: '我要评价',
      serviceValue: 0,
      environmentValue: 0,
      allValue: 0,
      localIds: [],
      imgList: [],
      index: 0
    }
  },
  methods: {
    handleClick () {
      const _this = this
      let url = encodeURIComponent(window.location.href.split('#')[0])
      this.$api.share.shareSDK({ url: url })
        .then((res) => {
          res = res.data
          if (res.code === this.$api.CODE_OK && res.data) {
            const data = res.data
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appId, // 必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature, // 必填，签名
              jsApiList: ['chooseImage', 'previewImage', 'uploadImage'] // 必填，需要使用的JS接口列表
            })
            wx.ready(() => {
              wx.chooseImage({
                count: 4, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                  // var localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                  _this.localIds.push(...res.localIds)
                }
              })
            })
            wx.error((res) => { // config验证失败回调函数
              console.log(res)
            })
          }
        }).catch((e) => {
          console.log(e)
        })
    },
    handleClickIndex (index) {
      this.index = index
      const _this = this
      wx.previewImage({
        current: _this.localIds[index], // 当前显示图片的http链接
        urls: _this.localIds // 需要预览的图片http链接列表
      })
    },
    handleSubmit () {
      if (this.serviceValue === 0 || this.environmentValue === 0 || this.allValue === 0) {
        Toast({
          message: '请选择评分',
          duration: 2000,
          forbidClick: true
        })
        return false
      }
      this.localIds.map((item) => {
        const _this = this
        wx.getLocalImgData({
          localId: item, // 图片的localID
          success: function (res) {
            _this.imgList.push(res.localData)
          }
        })
      })
      setTimeout(() => {
        this.getUpload()
      }, 300)
    },
    getUpload () {
      const text = this.$refs.textarea.value
      const id = this.$route.params.id
      const seller = this.$route.query.seller_id
      const uploadData = {
        composite_score: this.allValue,
        content: text,
        environment_score: this.environmentValue,
        id: id,
        seller_id: seller,
        service_score: this.serviceValue
      }
      const localIds = this.imgList
      if (localIds.length > 0) {
        this.$api.upload.getUploadImg({ localIds })
          .then(this.getUploadSucc)
      }
      this.$api.upload.getUploadInfo({ ...uploadData })
        .then(this.getUploadInfoSucc)
      Toast({
        message: '上传中...',
        duration: 2000,
        forbidClick: true
      })
    },
    getUploadSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        if (data) {
          Toast({
            message: '上传成功',
            duration: 1000,
            forbidClick: true
          })
          this.$router.back()
        }
      }
    },
    getUploadInfoSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        return false
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  background-color $bgcWh
  z-index 10
  overflow auto

  .content
    height 100%
    width 100%
    padding()
    padding-top 40px

    h3
      font-size $fzThird
      color $fzColor
      font-weight normal
      line-height 58px

    .score
      display flex
      height 94px
      align-items center

      .desc
        width 180px
        font-size $smallFz
        text-indent 30px

    .uplode-button
      width 146px
      height 146px
      background-color #fff
      border 2px solid #ccc
      box-sizing border-box
      border-radius 10px
      position relative

      .before
        width 30px
        height 30px
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        background-color #EBF8FF
        border 2px solid $bgcOne
        border-radius 50%

        &::before
          content ''
          position absolute
          width 70%
          height 2px
          top 50%
          left 50%
          transform translate(-50%, -50%)
          background-color $bgcOne

        &::after
          content ''
          position absolute
          width 2px
          height 70%
          top 50%
          left 50%
          transform translate(-50%, -50%)
          background-color $bgcOne

    .img-container
      display flex
      flex-wrap wrap

      .img-list
        display flex

        .img-item
          width 146px
          height 146px
          background-color #fff
          border 2px solid #ccc
          box-sizing border-box
          border-radius 10px

          img
            width 146px
            height 146px

    .textarea
      width 100%
      padding-top 16px
      padding-bottom 16px
      padding-right 16px
      padding-left 16px
      box-sizing border-box
      border 2px solid #ccc
      resize none
      height 300px
      border-radius 15px
      font-size $smallFz
      color $graySecond
      line-height 50px
      margin-bottom 40px

    .submit
      height 88px
      width 100%
      background-color $buttonBgc
      color $whiteFzClor
      font-size $fzSecond
      border-radius 10px
      border none

.evaluation-enter-active, .evaluation-leave-active
  transition all 0.3s

.evaluation-enter, .evaluation-leave-active
  transform translate3d(100%, 0, 0)
</style>
